<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h2>用户登录</h2>
        <form action="LoginServlet" method="post" onsubmit="return validateForm()">
            <div class="input-group">
                <label for="username">用户名：</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="input-group">
                <label for="password">密码：</label>
                <input type="password" id="password" name="password" required>
            </div>
            <!-- 生成的随机验证码 -->
            <div class="input-group">
                <label for="random_code">生成的验证码：</label>
                <span id="random_code_display"></span>
                <button type="button" onclick="generateRandomCode()">生成随机验证码</button>
            </div>
            <!-- 要求输入的验证码 -->
            <div class="input-group">
                <label for="input_code">请输入验证码：</label>
                <input type="text" id="input_code" name="input_code" required>
            </div>
            <!-- 其他表单字段 -->
            <button type="submit">登录</button>
        </form>
        <!-- 登录成功提示 -->
        <div id="login_success_message" style="display: none;">
            <p>登录成功！欢迎回来。</p>
        </div>
    </div>

    <script>
        var randomCode = '';

        function generateRandomCode() {
            var chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
            randomCode = '';
            for (var i = 0; i < 4; i++) {
                var index = Math.floor(Math.random() * chars.length);
                randomCode += chars.charAt(index);
            }
            document.getElementById('random_code_display').textContent = randomCode;
        }

        function validateForm() {
            var inputCode = document.getElementById('input_code').value;
            if (inputCode === randomCode) {
                // 登录成功，显示登录成功提示
                document.getElementById('login_success_message').style.display = 'block';
             
                return true; // 登录成功
            } else {
                alert('验证码错误，请重新输入！');
                return false; // 阻止表单提交
            }
        }
    </script>
</body>
</html>
